<template>
  <div style="width: 100%; height: 100%">
    <div>{{ dataId }}</div>
    <div :id="`${prop.dataId}graphContainer`" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Scroller } from '@antv/x6-plugin-scroller';
import { Graph } from '@antv/x6';
import type { Node } from '@antv/x6';
import { onActivated } from 'vue';
import { onDeactivated } from 'vue';
import { watch } from 'vue';
const prop = defineProps<{ dataId: string| undefined }>()

const graphRef = ref<Graph>();
// 初始化节点数据
const data = {
  nodes: [
    {
      id: 'node1',
      shape: 'rect',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'hello',
      zIndex: 10
    },
    {
      id: 'node2',
      shape: 'rect',
      x: 160,
      y: 180,
      width: 100,
      height: 40,
      label: 'world',
      zIndex: 10
    }
  ],
  edges: [
    {
      shape: 'edge',
      source: 'node1',
      target: 'node2',
      label: 'x6',
      attrs: {
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1
        }
      },
      zIndex: 10
    }
  ]
};
onMounted(()=> {
  // grapherRef.value = useGraph({
  const graph = new Graph({
    container: document.getElementById(`${prop.dataId}graphContainer`)!,
    width: 2000,
    height: 900,
    autoResize: true,
    background: { color: '#f9f9f9' },
    embedding: {
      enabled: true,
      findParent({ node }: { node: Node }) {
        const bbox = node.getBBox();
        return this.getNodes().filter(item => {
          const nodeData = item.getData<{ parent: boolean }>();
          if (nodeData && nodeData.parent) {
            const targetBBox = item.getBBox();
            return bbox.isIntersectWithRect(targetBBox);
          }
          return false;
        });
      }
    },
    grid: {
      visible: true,
      size: 10,
      type: 'dot',
      args: [
        {
          color: '#a0a0a0',
          thickness: 1
        }
      ]
    },
    mousewheel: {
      enabled: true,
      modifiers: ['ctrl', 'meta'],
      zoomAtMousePosition: true
    }
  });
  graph.use(new Scroller({
      enabled: true,
      pannable: false,
      autoResize: true,
      // width: 2000,
      // height: 2000
    }));
  graph.fromJSON(data);

  graph.centerContent();

  graphRef.value = graph;
});
const positionRef = ref();
onActivated(()=>{
  setTimeout(()=>{
    if(positionRef.value){
      const {left, top} = positionRef.value;
      graphRef.value?.setScrollbarPosition(left, top);
    }else{
      graphRef.value?.centerContent();
    }
  }, 100)
});
onDeactivated(()=>{
  positionRef.value = graphRef.value?.getScrollbarPosition();
  console.log(positionRef.value);
  // setTimeout(()=>{
  //   positionRef.value = graphRef.value?.getScrollbarPosition();
  //   console.log(positionRef.value);
  // }, 100)
});
// watch(
// () => graphRef.value?.getScrollbarPosition(),
// newPosition =>{
//   positionRef.value = newPosition;
//   console.log(newPosition);
// }
// );
</script>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
